<script setup>
import { ref } from 'vue'
const form = ref({
  userId: '17600521247',
  nickname: '247',
  realName: '崔*强',
  gender: 'men',
  birthday: '1998-06-23',
  phoneNumber: '176****1247',
  email: 'cuihongqiang@190.vip',
  qq: '1234567890',
  wechat: '1234567890',
  area: [],
  address: '北京市海淀区',
  companyName: '北京190科技有限公司',
})
const isEdit = ref(false)
const onSubmit = () => {
  console.log('submit!')
}
const handleChange = (value) => {
  console.log(value)
}
const options = [
  {
    value: 'beijing',
    label: '北京市',
    children: [
      {
        value: 'dongcheng',
        label: '东城区',
      },
      {
        value: 'xicheng',
        label: '西城区',
      },
      // Add more districts as needed
    ],
  },
  {
    value: 'tianjin',
    label: '天津市',
    children: [
      {
        value: 'heping',
        label: '和平区',
      },
      {
        value: 'nankai',
        label: '南开区',
      },
      // Add more districts as needed
    ],
  },
  {
    value: 'hebei',
    label: '河北省',
    children: [
      {
        value: 'shijiazhuang',
        label: '石家庄市',
        children: [
          {
            value: 'changan',
            label: '长安区',
          },
          {
            value: 'qiaoxi',
            label: '桥西区',
          },
          // Add more districts as needed
        ],
      },
      {
        value: 'tangshan',
        label: '唐山市',
        children: [
          {
            value: 'lunan',
            label: '路南区',
          },
          {
            value: 'lubei',
            label: '路北区',
          },
          // Add more districts as needed
        ],
      },
    ],
  },
  {
    value: 'shanxi',
    label: '山西省',
    children: [
      {
        value: 'taiyuan',
        label: '太原市',
        children: [
          {
            value: 'xiaodian',
            label: '小店区',
          },
          {
            value: 'yingze',
            label: '迎泽区',
          },
          // Add more districts as needed
        ],
      },
      {
        value: 'datong',
        label: '大同市',
        children: [
          {
            value: 'chengqu',
            label: '城区',
          },
          {
            value: 'kuangqu',
            label: '矿区',
          },
          // Add more districts as needed
        ],
      },
    ],
  },
  {
    value: 'neimenggu',
    label: '内蒙古自治区',
    children: [
      {
        value: 'huhehaote',
        label: '呼和浩特市',
        children: [
          {
            value: 'xincheng',
            label: '新城区',
          },
          {
            value: 'huimin',
            label: '回民区',
          },
          // Add more districts as needed
        ],
      },
      {
        value: 'baotou',
        label: '包头市',
        children: [
          {
            value: 'donghe',
            label: '东河区',
          },
          {
            value: 'kundulun',
            label: '昆都仑区',
          },
          // Add more districts as needed
        ],
      },
    ],
  },
  {
    value: 'liaoning',
    label: '辽宁省',
    children: [
      {
        value: 'shenyang',
        label: '沈阳市',
        children: [
          {
            value: 'shenhe',
            label: '沈河区',
          },
          {
            value: 'huanggu',
            label: '皇姑区',
          },
          // Add more districts as needed
        ],
      },
      {
        value: 'dalian',
        label: '大连市',
        children: [
          {
            value: 'xigang',
            label: '西岗区',
          },
          {
            value: 'zhongshan',
            label: '中山区',
          },
          // Add more districts as needed
        ],
      },
    ],
  },
  {
    value: 'jilin',
    label: '吉林省',
    children: [
      {
        value: 'changchun',
        label: '长春市',
        children: [
          {
            value: 'nanguan',
            label: '南关区',
          },
          {
            value: 'chaoyang',
            label: '朝阳区',
          },
          // Add more districts as needed
        ],
      },
      {
        value: 'jilin',
        label: '吉林市',
        children: [
          {
            value: 'chuanying',
            label: '船营区',
          },
          {
            value: 'longtan',
            label: '龙潭区',
          },
          // Add more districts as needed
        ],
      },
    ],
  },
  {
    value: 'heilongjiang',
    label: '黑龙江省',
    children: [
      {
        value: 'haerbin',
        label: '哈尔滨市',
        children: [
          {
            value: 'daoli',
            label: '道里区',
          },
          {
            value: 'nangang',
            label: '南岗区',
          },
          // Add more districts as needed
        ],
      },
      {
        value: 'qiqihaer',
        label: '齐齐哈尔市',
        children: [
          {
            value: 'longsha',
            label: '龙沙区',
          },
          {
            value: 'jianhua',
            label: '建华区',
          },
          // Add more districts as needed
        ],
      },
    ],
  },
  {
    value: 'shanghai',
    label: '上海市',
    children: [
      {
        value: 'huangpu',
        label: '黄浦区',
      },
      {
        value: 'xuhui',
        label: '徐汇区',
      },
      // Add more districts as needed
    ],
  },
  {
    value: 'jiangsu',
    label: '江苏省',
    children: [
      {
        value: 'nanjing',
        label: '南京市',
        children: [
          {
            value: 'xuanwu',
            label: '玄武区',
          },
          {
            value: 'qinhuai',
            label: '秦淮区',
          },
          // Add more districts as needed
        ],
      },
      {
        value: 'suzhou',
        label: '苏州市',
        children: [
          {
            value: 'gusu',
            label: '姑苏区',
          },
          {
            value: 'wuzhong',
            label: '吴中区',
          },
          // Add more districts as needed
        ],
      },
    ],
  },
  {
    value: 'zhejiang',
    label: '浙江省',
    children: [
      {
        value: 'hangzhou',
        label: '杭州市',
        children: [
          {
            value: 'shangcheng',
            label: '上城区',
          },
          {
            value: 'xiacheng',
            label: '下城区',
          },
          // Add more districts as needed
        ],
      },
      {
        value: 'ningbo',
        label: '宁波市',
        children: [
          {
            value: 'haishu',
            label: '海曙区',
          },
          {
            value: 'jiangdong',
            label: '江东区',
          },
          // Add more districts as needed
        ],
      },
    ],
  },
  {
    value: 'anhui',
    label: '安徽省',
    children: [
      {
        value: 'hefei',
        label: '合肥市',
        children: [
          {
            value: 'yaohai',
            label: '瑶海区',
          },
          {
            value: 'luyang',
            label: '庐阳区',
          },
          // Add more districts as needed
        ],
      },
      {
        value: 'wuhu',
        label: '芜湖市',
        children: [
          {
            value: 'jinghu',
            label: '镜湖区',
          },
          {
            value: 'yijiang',
            label: '弋江区',
          },
          // Add more districts as needed
        ],
      },
    ],
  },
  {
    value: 'fujian',
    label: '福建省',
    children: [
      {
        value: 'fuzhou',
        label: '福州市',
        children: [
          {
            value: 'gulou',
            label: '鼓楼区',
          },
          {
            value: 'taijiang',
            label: '台江区',
          },
          // Add more districts as needed
        ],
      },
      {
        value: 'xiamen',
        label: '厦门市',
        children: [
          {
            value: 'siming',
            label: '思明区',
          },
          {
            value: 'huli',
            label: '湖里区',
          },
          // Add more districts as needed
        ],
      },
    ],
  },
  {
    value: 'jiangxi',
    label: '江西省',
    children: [
      {
        value: 'nanchang',
        label: '南昌市',
        children: [
          {
            value: 'donghu',
            label: '东湖区',
          },
          {
            value: 'xihu',
            label: '西湖区',
          },
          // Add more districts as needed
        ],
      },
      {
        value: 'jiujiang',
        label: '九江市',
        children: [
          {
            value: 'xunyang',
            label: '浔阳区',
          },
          {
            value: 'lushan',
            label: '庐山区',
          },
          // Add more districts as needed
        ],
      },
    ],
  },
  {
    value: 'shandong',
    label: '山东省',
    children: [
      {
        value: 'jinan',
        label: '济南市',
        children: [
          {
            value: 'licheng',
            label: '历城区',
          },
          {
            value: 'shizhong',
            label: '市中区',
          },
          // Add more districts as needed
        ],
      },
      {
        value: 'qingdao',
        label: '青岛市',
        children: [
          {
            value: 'shinan',
            label: '市南区',
          },
          {
            value: 'shibei',
            label: '市北区',
          },
          // Add more districts as needed
        ],
      },
    ],
  },
  {
    value: 'henan',
    label: '河南省',
    children: [
      {
        value: 'zhengzhou',
        label: '郑州市',
        children: [
          {
            value: 'jinshui',
            label: '金水区',
          },
          {
            value: 'erqi',
            label: '二七区',
          },
          // Add more districts as needed
        ],
      },
      {
        value: 'luoyang',
        label: '洛阳市',
        children: [
          {
            value: 'jianxi',
            label: '涧西区',
          },
          {
            value: 'xigong',
            label: '西工区',
          },
          // Add more districts as needed
        ],
      },
    ],
  },
  {
    value: 'hubei',
    label: '湖北省',
    children: [
      {
        value: 'wuhan',
        label: '武汉市',
        children: [
          {
            value: 'jianghan',
            label: '江汉区',
          },
          {
            value: 'wuchang',
            label: '武昌区',
          },
          // Add more districts as needed
        ],
      },
      {
        value: 'yichang',
        label: '宜昌市',
        children: [
          {
            value: 'xiling',
            label: '西陵区',
          },
          {
            value: 'wujiagang',
            label: '伍家岗区',
          },
          // Add more districts as needed
        ],
      },
    ],
  },
  {
    value: 'hunan',
    label: '湖南省',
    children: [
      {
        value: 'changsha',
        label: '长沙市',
        children: [
          {
            value: 'furong',
            label: '芙蓉区',
          },
          {
            value: 'tianxin',
            label: '天心区',
          },
          // Add more districts as needed
        ],
      },
      {
        value: 'zhuzhou',
        label: '株洲市',
        children: [
          {
            value: 'hetang',
            label: '荷塘区',
          },
          {
            value: 'lusong',
            label: '芦淞区',
          },
          // Add more districts as needed
        ],
      },
    ],
  },
  {
    value: 'guangdong',
    label: '广东省',
    children: [
      {
        value: 'guangzhou',
        label: '广州市',
        children: [
          {
            value: 'tianhe',
            label: '天河区',
          },
          {
            value: 'yuexiu',
            label: '越秀区',
          },
          // Add more districts as needed
        ],
      },
      {
        value: 'shenzhen',
        label: '深圳市',
        children: [
          {
            value: 'nanshan',
            label: '南山区',
          },
          {
            value: 'futian',
            label: '福田区',
          },
          // Add more districts as needed
        ],
      },
    ],
  },
  {
    value: 'guangxi',
    label: '广西壮族自治区',
    children: [
      {
        value: 'nanning',
        label: '南宁市',
        children: [
          {
            value: 'xingning',
            label: '兴宁区',
          },
          {
            value: 'qingxiu',
            label: '青秀区',
          },
          // Add more districts as needed
        ],
      },
      {
        value: 'liuzhou',
        label: '柳州市',
        children: [
          {
            value: 'chengzhong',
            label: '城中区',
          },
          {
            value: 'yufeng',
            label: '鱼峰区',
          },
          // Add more districts as needed
        ],
      },
    ],
  },
  {
    value: 'hainan',
    label: '海南省',
    children: [
      {
        value: 'haikou',
        label: '海口市',
        children: [
          {
            value: 'longhua',
            label: '龙华区',
          },
          {
            value: 'xiuying',
            label: '秀英区',
          },
          // Add more districts as needed
        ],
      },
      {
        value: 'sanya',
        label: '三亚市',
        children: [
          {
            value: 'jiyang',
            label: '吉阳区',
          },
          {
            value: 'tianya',
            label: '天涯区',
          },
          // Add more districts as needed
        ],
      },
    ],
  },
  {
    value: 'chongqing',
    label: '重庆市',
    children: [
      {
        value: 'yuzhong',
        label: '渝中区',
      },
      {
        value: 'jiangbei',
        label: '江北区',
      },
      // Add more districts as needed
    ],
  },
  {
    value: 'sichuan',
    label: '四川省',
    children: [
      {
        value: 'chengdu',
        label: '成都市',
        children: [
          {
            value: 'jinjiang',
            label: '锦江区',
          },
          {
            value: 'qingyang',
            label: '青羊区',
          },
          // Add more districts as needed
        ],
      },
      {
        value: 'mianyang',
        label: '绵阳市',
        children: [
          {
            value: 'fucheng',
            label: '涪城区',
          },
          {
            value: 'youxian',
            label: '游仙区',
          },
          // Add more districts as needed
        ],
      },
    ],
  },
  {
    value: 'guizhou',
    label: '贵州省',
    children: [
      {
        value: 'guiyang',
        label: '贵阳市',
        children: [
          {
            value: 'nanming',
            label: '南明区',
          },
          {
            value: 'yunyan',
            label: '云岩区',
          },
          // Add more districts as needed
        ],
      },
      {
        value: 'zunyi',
        label: '遵义市',
        children: [
          {
            value: 'honghuagang',
            label: '红花岗区',
          },
          {
            value: 'huichuan',
            label: '汇川区',
          },
          // Add more districts as needed
        ],
      },
    ],
  },
  {
    value: 'yunnan',
    label: '云南省',
    children: [
      {
        value: 'kunming',
        label: '昆明市',
        children: [
          {
            value: 'wuhua',
            label: '五华区',
          },
          {
            value: 'panlong',
            label: '盘龙区',
          },
          // Add more districts as needed
        ],
      },
      {
        value: 'dali',
        label: '大理市',
        children: [
          {
            value: 'dali',
            label: '大理区',
          },
          {
            value: 'yangbi',
            label: '漾濞区',
          },
          // Add more districts as needed
        ],
      },
    ],
  },
  {
    value: 'xizang',
    label: '西藏自治区',
    children: [
      {
        value: 'lasa',
        label: '拉萨市',
        children: [
          {
            value: 'chengguan',
            label: '城关区',
          },
          {
            value: 'dazi',
            label: '达孜区',
          },
          // Add more districts as needed
        ],
      },
      {
        value: 'rikaze',
        label: '日喀则市',
        children: [
          {
            value: 'sangzhuzi',
            label: '桑珠孜区',
          },
          {
            value: 'jiangzi',
            label: '江孜区',
          },
          // Add more districts as needed
        ],
      },
    ],
  },
  {
    value: 'shanxi',
    label: '陕西省',
    children: [
      {
        value: 'xian',
        label: '西安市',
        children: [
          {
            value: 'weiyang',
            label: '未央区',
          },
          {
            value: 'yanta',
            label: '雁塔区',
          },
          // Add more districts as needed
        ],
      },
      {
        value: 'xianyang',
        label: '咸阳市',
        children: [
          {
            value: 'qindu',
            label: '秦都区',
          },
          {
            value: 'yangling',
            label: '杨陵区',
          },
          // Add more districts as needed
        ],
      },
    ],
  },
  {
    value: 'gansu',
    label: '甘肃省',
    children: [
      {
        value: 'lanzhou',
        label: '兰州市',
        children: [
          {
            value: 'chengguan',
            label: '城关区',
          },
          {
            value: 'qilihe',
            label: '七里河区',
          },
          // Add more districts as needed
        ],
      },
      {
        value: 'jiayuguan',
        label: '嘉峪关市',
        children: [
          {
            value: 'xiongguan',
            label: '雄关区',
          },
          {
            value: 'jinguan',
            label: '镜关区',
          },
          // Add more districts as needed
        ],
      },
    ],
  },
  {
    value: 'qinghai',
    label: '青海省',
    children: [
      {
        value: 'xining',
        label: '西宁市',
        children: [
          {
            value: 'chengdong',
            label: '城东区',
          },
          {
            value: 'chengxi',
            label: '城西区',
          },
          // Add more districts as needed
        ],
      },
      {
        value: 'haidong',
        label: '海东市',
        children: [
          {
            value: 'pingan',
            label: '平安区',
          },
          {
            value: 'leping',
            label: '乐平区',
          },
          // Add more districts as needed
        ],
      },
    ],
  },
  {
    value: 'ningxia',
    label: '宁夏回族自治区',
    children: [
      {
        value: 'yinchuan',
        label: '银川市',
        children: [
          {
            value: 'xingqing',
            label: '兴庆区',
          },
          {
            value: 'jinfeng',
            label: '金凤区',
          },
          // Add more districts as needed
        ],
      },
      {
        value: 'shizuishan',
        label: '石嘴山市',
        children: [
          {
            value: 'dawukou',
            label: '大武口区',
          },
          {
            value: 'huinong',
            label: '惠农区',
          },
          // Add more districts as needed
        ],
      },
    ],
  },
  {
    value: 'xinjiang',
    label: '新疆维吾尔自治区',
    children: [
      {
        value: 'wulumuqi',
        label: '乌鲁木齐市',
        children: [
          {
            value: 'tianbei',
            label: '天山区',
          },
          {
            value: 'shayibake',
            label: '沙依巴克区',
          },
          // Add more districts as needed
        ],
      },
      {
        value: 'kashi',
        label: '喀什市',
        children: [
          {
            value: 'kashi',
            label: '喀什区',
          },
          {
            value: 'shufu',
            label: '疏附区',
          },
          // Add more districts as needed
        ],
      },
    ],
  },
  {
    value: 'taiwan',
    label: '台湾省',
    children: [
      {
        value: 'taipei',
        label: '台北市',
        children: [
          {
            value: 'zhongzheng',
            label: '中正区',
          },
          {
            value: 'datong',
            label: '大同区',
          },
          // Add more districts as needed
        ],
      },
      {
        value: 'kaohsiung',
        label: '高雄市',
        children: [
          {
            value: 'xinxing',
            label: '新兴区',
          },
          {
            value: 'qianjin',
            label: '前金区',
          },
          // Add more districts as needed
        ],
      },
    ],
  },
  {
    value: 'xianggang',
    label: '香港特别行政区',
    children: [
      {
        value: 'hongkong',
        label: '香港岛',
        children: [
          {
            value: 'central',
            label: '中西区',
          },
          {
            value: 'wanzi',
            label: '湾仔区',
          },
          // Add more districts as needed
        ],
      },
      {
        value: 'kowloon',
        label: '九龙',
        children: [
          {
            value: 'yauTsimMong',
            label: '油尖旺区',
          },
          {
            value: 'shamShuiPo',
            label: '深水埗区',
          },
          // Add more districts as needed
        ],
      },
    ],
  },
  {
    value: 'aomen',
    label: '澳门特别行政区',
    children: [
      {
        value: 'macauPeninsula',
        label: '澳门半岛',
        children: [
          {
            value: 'macau',
            label: '澳门区',
          },
          {
            value: 'saiwan',
            label: '西湾区',
          },
          // Add more districts as needed
        ],
      },
      {
        value: 'taipa',
        label: '氹仔',
        children: [
          {
            value: 'taipa',
            label: '氹仔区',
          },
          {
            value: 'coloane',
            label: '路环区',
          },
          // Add more districts as needed
        ],
      },
    ],
  },
]
</script>
<template>
    <div class="bs-panel">
        <div class="bs-panel-body">
            <div class="page-title bold">个人资料</div>
            <el-form :model="form" label-width="auto" >
                <div class="form-top" >
                    <el-link v-if="!isEdit" type="primary" @click="isEdit = !isEdit">修改</el-link>
                </div>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="用户ID：">
                            <div class="el-input__inner">{{ form.userId }}</div>
                        </el-form-item>
                        <el-form-item label="昵称：">
                            <el-input v-model="form.nickname" v-if="isEdit" style="width: 200px"/>
                            <div class="el-input__inner" v-else>{{ form.nickname }}</div>
                        </el-form-item>
                        <el-form-item label="真实姓名：">
                            <div class="el-input__inner">{{ form.realName }}</div>
                        </el-form-item>
                        <el-form-item label="性别：">
                            <el-radio-group v-model="form.gender" v-if="isEdit">
                            <el-radio value="men">男</el-radio>
                            <el-radio value="women">女</el-radio>
                            </el-radio-group>
                            <div class="el-input__inner" v-else>{{ form.gender == 'men' ? '男' : '女' }}</div>
                        </el-form-item>
                        <el-form-item label="生日：">
                            <el-date-picker v-if="isEdit"
                            v-model="form.birthday"
                            type="date"
                            placeholder="Pick a date"
                            style="width: 200px"
                            />
                            <div class="el-input__inner" v-else>{{ form.birthday }}</div>
                        </el-form-item>
                        <el-form-item label="联系电话：">
                            <div class="el-input__inner">{{ form.phoneNumber }}</div>
                        </el-form-item>
                        <el-form-item label="Email：">
                            <div class="el-input__inner">{{ form.email }}</div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="联系QQ：">
                            <el-input v-model="form.qq" style="width: 200px" v-if="isEdit"/>
                            <div class="el-input__inner" v-else>{{ form.qq }}</div>
                        </el-form-item>
                        <el-form-item label="微信号：">
                            <el-input v-model="form.wechat" style="width: 200px" v-if="isEdit"/>
                            <div class="el-input__inner" v-else>{{ form.wechat }}</div>
                        </el-form-item>
                        <el-form-item label="联系地址：">
                            <el-cascader v-model="form.area" :options="options" @change="handleChange"  v-if="isEdit" style="width: 280px;margin-bottom: 10px;"/>
                            <el-input v-model="form.address" style="width: 200px" v-if="isEdit"/>
                            <div class="el-input__inner" v-else>
                                {{ form.address }}
                            </div>
                        </el-form-item>
                        <el-form-item label="公司名称：">
                            <el-input v-model="form.companyName" style="width: 200px" v-if="isEdit"/>
                            <div class="el-input__inner" v-else>{{ form.companyName }}</div>
                        </el-form-item>
                    </el-col>
                </el-row>
                <div class="form-footer" v-if="isEdit">
                    <el-button  @click="isEdit = !isEdit">取消</el-button>
                    <el-button type="primary" @click="onSubmit">保存</el-button>
                </div>
            </el-form>
        </div>
    </div>
</template>
<style scoped lang='scss'>
    .bs-panel-body{
        padding: 25px;
    }
    .form-footer,
    .form-top{
        height: 32px;
        text-align: right;
    }





</style>